<template>
	<div class="home">
		<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
			<van-list
				v-model:loading="loading"
				:finished="finished"
				finished-text="没有更多了"
				@load="onLoad"
				>
				<VCard :cardData="list"/>
			</van-list>
		</van-pull-refresh>
	</div>
</template>

<script setup>
	import VCard from "../../components/home/Card.vue"
	import { ref, reactive,computed, getCurrentInstance,watch,onMounted,onUpdated} from 'vue'
	import { useStore } from 'vuex'
	import { getPosition } from '../../api/home.js'
	const { proxy } = getCurrentInstance()
	const _this = proxy;
	
	const list = ref([]);
    const loading = ref(false);
    const finished = ref(false);
	const refreshing = ref(false);

	const param = reactive({
		pageNum:1,	//pageNum
		pageSize: 10,//每页个数
		keyword:''
	})

	const onLoad = async () => {
     // 异步更新数据
	  await getPosition(param).then(res=>{
		// console.log(res.data)
		  // 加载状态结束
		  if(res.code === 200){
			list.value = list.value.concat(res.data.records)
			loading.value = false;
			setTimeout(()=>{
				refreshing.value = false	
			},200)
		  }
		  // 数据全部加载完成
		  if (param.pageNum >= res.data.pages) {
			finished.value= true;
		  }
	  })
	  param.pageNum++
    };
	const onRefresh = () => {
		param.pageNum = 1
		list.value = []
		// 清空列表数据
		finished.value = false;
		// 重新加载数据
		// 将 loading 设置为 true，表示处于加载状态
		loading.value = true;
		onLoad();
    };
</script>

<style lang="scss">
	body{background: #fafafa;}
</style>
